<!-- 看板Tab组件 -->
<script setup lang="ts">
import { MissionVO } from '@/api/mission/types';
import { MissionStatusNames } from '@/api/mission/types';
import { MISSION_STATUS } from '@/constants';
import MissionCard from '@/components/Mission/MissionCard.vue';
import draggable from 'vuedraggable';

const props = defineProps<{
  missionsByStatus: Record<number, MissionVO[]>;
  isAdmin: boolean;
}>();

const emit = defineEmits(['status-change', 'edit', 'delete']);

// 状态栏配置
const statusColumns = [
  {
    key: MISSION_STATUS.NOT_STARTED,
    title: MissionStatusNames[MISSION_STATUS.NOT_STARTED],
    color: '#94a3b8'
  },
  {
    key: MISSION_STATUS.IN_PROGRESS,
    title: MissionStatusNames[MISSION_STATUS.IN_PROGRESS],
    color: '#3b82f6'
  },
  {
    key: MISSION_STATUS.COMPLETED,
    title: MissionStatusNames[MISSION_STATUS.COMPLETED],
    color: '#10b981'
  },
  {
    key: MISSION_STATUS.CLOSED,
    title: MissionStatusNames[MISSION_STATUS.CLOSED],
    color: '#ef4444'
  }
];

/** 拖拽结束处理 */
function handleDragEnd(event: any, targetElement: HTMLElement) {
  console.log('=== 拖拽事件调试 ===');
  const missionId: number = Number(event.item.dataset.missionId);
  console.log('任务ID:', missionId);
  console.log('目标DOM元素:', targetElement);

  // 通过DOM获取目标栏的状态
  let newStatus: number | undefined;
  const targetColumn = targetElement.closest('.kanban-column');
  if (targetColumn) {
    // 找到对应的状态栏配置
    const columnHeader = targetColumn.querySelector('.column-header');
    const titleElement = columnHeader?.querySelector('.column-title');
    const title = titleElement?.textContent?.trim();

    console.log('目标栏标题:', title);

    // 根据标题找到对应的状态值
    const statusConfig = statusColumns.find(col => col.title === title);
    if (statusConfig) {
      newStatus = statusConfig.key;
      console.log('目标状态 (新状态):', newStatus);
      console.log('状态名称:', MissionStatusNames[newStatus]);
    }
  }

  if (!newStatus) {
    console.log('无法确定目标状态，取消操作');
    return;
  }

  if (missionId && newStatus) {
    // 从所有状态栏中找到对应任务
    let mission: MissionVO | undefined;
    let sourceStatus: number | undefined;

    Object.keys(props.missionsByStatus).forEach(status => {
      const found = props.missionsByStatus[Number(status)].find(
        item => Number(item.id) === missionId
      );
      if (found) {
        mission = found;
        sourceStatus = Number(status);
        console.log(`在状态栏 ${status} (${MissionStatusNames[Number(status)]}) 中找到任务`);
      }
    });

    if (mission) {
      console.log('找到任务:', mission);
      console.log('原状态:', mission.status);
      console.log('原状态名称:', MissionStatusNames[mission.status]);
      console.log('源状态栏:', sourceStatus);
      console.log('源状态栏名称:', MissionStatusNames[sourceStatus!]);
      console.log('状态是否变化:', mission.status !== newStatus);

      if (mission.status !== newStatus) {
        console.log('触发状态变更事件');
        emit('status-change', mission, newStatus);
      } else {
        console.log('状态未变化，不触发事件 - 任务可能已被移动到正确状态栏');
      }
    } else {
      console.log('未找到任务，可能拖拽有问题');
    }
  }
}
</script>

<template>
  <div class="kanban-content">
    <div class="kanban-board">
      <div
        v-for="column in statusColumns"
        :key="column.key"
        class="kanban-column"
        :style="{ '--border-color': column.color }"
      >
        <div class="column-header">
          <span class="column-title">{{ column.title }}</span>
          <span class="column-count">{{ missionsByStatus[column.key]?.length || 0 }}</span>
        </div>
        <draggable
          :list="missionsByStatus[column.key]"
          :group="{ name: 'missions', pull: true, put: true }"
          :animation="150"
          ghost-class="sortable-ghost"
          drag-class="sortable-drag"
          :disabled="!isAdmin"
          item-key="id"
          class="column-content"
          @end="event => handleDragEnd(event, event.to.parentElement)"
        >
          <template #item="{ element: mission }">
            <mission-card
              :key="mission.id"
              :mission="mission"
              :show-actions="isAdmin"
              :draggable="isAdmin"
              :data-mission-id="mission.id"
              class="kanban-card"
              @edit="mission => emit('edit', mission)"
              @delete="id => emit('delete', id)"
            />
          </template>
        </draggable>
        <div v-if="!missionsByStatus[column.key]?.length" class="empty-column">
          <el-empty description="暂无任务" :image-size="60" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 看板内容 */
.kanban-content {
  height: 100%;
  overflow-y: auto;
  width: 100%;
  min-width: 0;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 20px;
  height: 100%;
  min-height: 600px;
  width: 100%;
  max-width: none;
}

.kanban-column {
  background: #f8fafc;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 300px;
  max-width: none;
}

.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}

.column-title {
  font-weight: 600;
  color: #1f2937;
}

.column-count {
  background: var(--border-color);
  color: white;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.column-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  min-height: 400px;
}

.kanban-card {
  margin-bottom: 12px;
  cursor: move;
  transition: all 0.2s ease;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.empty-column {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #9ca3af;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .kanban-board {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .kanban-board {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style>
